<template>
    <div>
        <h2>领号系统</h2>
        <p v-if="errorMsg" style="color:red;">{{ errorMsg }}</p>
        <form>
            <div>
                <label>QQ号</label>
                <input type="text" placeholder="在群里的QQ" v-model.number="username" required>
            </div>
            <div>
                <label>密码</label>
                <input placeholder="非QQ密码，没有请先设置" type="password" v-model="password" required>
            </div>
            <button type="submit" @click.prevent="submitForm">登录</button>
        </form>
        <br>
        <button style="background-color:darkgreen;color:azure;border-radius: 13%;"
            @click="$router.push('/register')">设置密码</button>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            errorMsg: ''
        }
    },
    methods: {
        async submitForm() {
            const userData = {
                qqNum: (this.username),
                password: this.password
            }
            await   // 发送请求
                fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(userData),
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 0) {
                            // 登录成功，将 token 存储起来
                            localStorage.setItem('token', data.token)
                            // 跳转到详情页
                            this.$router.push('/detail')
                        } else {
                            // 登录失败，提示错误信息
                            this.errorMsg = data.msg
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error)
                        this.errorMsg = '请求出错，请稍后再试！'
                    })
        }
    }
}
</script>
  

<style>
@import url('../assets/styles.css');

/* 组件样式代码 */
</style>